﻿@page "/color-picker/inline"

@using Syncfusion.Blazor.Inputs
@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample explains the inline mode of the color picker/palette with default colors and predefined styles.</p>
</SampleDescription>
<ActionDescription>
   <p>In this sample,</p>
       <ul>
           <li>Color picker/palette is rendered inline by using the <a target="_blank" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Inline">Inline</a> property set to <b>true</b>.</li>
           <li>Using the <a target="_blank" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode">Mode</a> property, you can specify the mode<i>(Picker/ Palette)</i>  of the ColorPicker.</li>
           <li>Using the <a target="_blank" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons">ShowButtons</a> property, you can enable or disable the control<i>(apply/cancel)</i>  buttons.</li>
        </ul>
    <p> More information about Blazor ColorPicker component can be found in this <a target="_blank" href="https://blazor.syncfusion.com/documentation/color-picker/getting-started/">documentation</a> section.</p>
</ActionDescription>

<div class="control-section">
    <div id="inline-control">
        <div class="row">
            <div id="preview" style="@colorValue"></div>
        </div>
        <div id="inline-content" class="row">
            <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                <h4>Inline Palette</h4>
                <SfColorPicker Mode="ColorPickerMode.Palette" ModeSwitcher="false" Inline="true" ShowButtons="false" ValueChange="@onChange"></SfColorPicker>
            </div>
            <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                <h4>Inline Picker</h4>
                <SfColorPicker ModeSwitcher="false" Inline="true" ShowButtons="false" ValueChange="@onChange"></SfColorPicker>
            </div>
        </div>
    </div>
</div>

@code {
    private string colorValue = "background-color: #008000";
    public void onChange(ColorPickerEventArgs args)
    {
        colorValue = "background-color: " + args.CurrentValue.Hex;
    }
}

<style>
    /* Common sample level styles */
    #inline-control {
        width: 100%;
        text-align: center;
    }
    #inline-control .col-xs-12 {
        margin: 10px 0;
    }
    #inline-control h4 {
        margin-bottom: 20px;
    }
    .mobile #inline-control h4 {
        font-size: 20px;
    }
    /* Preview area styles */
    #inline-control #preview {
        background: transparent url("images/color-picker/pen.png") no-repeat;
        display: inline-block;
        height: 80px;
        margin: 10px 0;
        width: 600px;
        background-color: #008000;
    }
    #inline-control.e-mobile-control #preview {
        background: transparent url("images/color-picker/pen-mobile.png") no-repeat;
        background-color: #008000;
        height: 35px;
        width: 300px;
    }
    .highcontrast #inline-control #preview {
        background: transparent url("images/color-picker/pen-highcontrast.png") no-repeat;
        background-color: #008000;
    }
    .highcontrast #inline-control.e-mobile-control #preview {
        background: transparent url("images/color-picker/pen-mobile-highcontrast.png") no-repeat;
        background-color: #008000;
    }
    /* Common sample level styles for mobile */
    #inline-control.e-mobile-control h4 {
        margin-bottom: 15px;
    }
    #inline-control.e-mobile-control #inline-content {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    #inline-control.e-mobile-control #inline-content .col-xs-12 {
        flex: 0 0 auto;
        margin-top: 5px;
    }
</style>
